<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="11" height="6" viewBox="0 0 11 6" fill="none">
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M8.35983 0.109835C8.50628 -0.0366117 8.74372 -0.0366117 8.89017 0.109835L10.3902 1.60984C10.5366 1.75628 10.5366 1.99372 10.3902 2.14016L8.89017 3.64016C8.74372 3.78661 8.50628 3.78661 8.35983 3.64016C8.21339 3.49372 8.21339 3.25628 8.35983 3.10984L9.21967 2.25H2.85938C1.69854 2.25 0.75 3.22891 0.75 4.40625V4.875C0.75 5.08211 0.582107 5.25 0.375 5.25C0.167893 5.25 0 5.08211 0 4.875V4.40625C0 2.83344 1.26583 1.5 2.85938 1.5H9.21967L8.35983 0.640165C8.21339 0.493718 8.21339 0.256282 8.35983 0.109835Z"
      fill="currentColor" />
  </svg>
</template>

<script setup lang="ts">
  interface Props {
    size?: number | string;
    color?: string;
  }

  const props = withDefaults(defineProps<Props>(), {
    size: 24,
    color: '#CBCBCB',
  });
</script>

<style scoped lang="scss">
  svg {
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    overflow: hidden;
    outline: none;
    color: v-bind('props.color');
    cursor: pointer;
    &:hover {
      color: #222222;
    }
  }
</style>
